<template>
  <div style="background: #F5F5F5;padding-top: 50px;">
    <validator name='v'>
      <form class="flex" novalidate @submit.prevent="signIn()" style="align-items: center;">
        <img src="../../assets/loginone.png" alt="">
          <!-- <span style="font-size: 20px;color: #00B9F1;">博能燃气</span>
          <span style="background: #00B9F1;color: #FFF;padding: 5px 20px;font-size:16px; margin-top:10px;">手机抄表系统</span> -->
        <div class="flex login-input">
          <div>
            <img src="../../assets/loginuser.png" alt="用户名">
            <input id="ename" placeholder="请输入用户名" autofocus v-model="model.ename" v-validate:ename='{ required: true }'>
          </div>
          <div>
            <img src="../../assets/loginpsw.png" alt="密码">
            <input id="psw" type="password"  id="inputPassword" placeholder="请输入密码" v-model="model.password" v-validate:password='{ required: true }'>
          </div>
        </div>
        <div class="app-btn" style="width: 100%;margin-top:35px;max-width: 300px;">
          <button :disabled="!$v.valid" class="btn btn-primary btn-block" type="submit">登录</button>
        </div>

      </form>
    </validator>
    <div class="login-footer login-footer_fixed-bottom">
        <p class="login-footer__links">
            <a href="javascript:home();" class="login-footer__link">博能燃气</a>
        </p>
        <p class="login-footer__text">Copyright @ v1.0.0 aofeng</p>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import co from 'co'
import appData from '../../../src/components/appData'
import config from '../../../src/components/config'
let login = function * (self) {
  //config.resultUrl +
  yield self.$resetpost(config.resultUrl + 'rs/logic/login', {data: self.model}, {resolveMsg: null, rejectMsg: '登录失败：'}).then((ret) => {
    console.log(ret)
    if (ret.data.status === 200) {
      appData.loginUser = ret.data
      console.log(appData.loginUser)
      self.$goto('home-page')
    } else {
      HostApp.alert('登录失败。')
    }
  })
  // let ret = yield self.$post('rs/logic/login', {data: self.model}, {resolveMsg: null, rejectMsg: '登录失败：'})
  // let ret = yield self.$post('rs/logic/login', {data: self.model}, {resolveMsg: null, rejectMsg: '登录失败：'})
  // console.log(ret.data)

}

export default {
  title: '登录系统',
  data() {
    return {
      model: {
        ename: '',
        password: ''
      }
    }
  },
  methods: {
    signIn() {
      window.alert('进入登陆页面')
      let gen = login(this)
      return co(gen)
    }
  }
}
</script>
<style scoped>
  .login-input input, .login-input img {
    padding: 8px 10px;
    border: none;
    outline: none;
    margin: 0px;
  }
  .login-input {
    width: 90%;
    border-radius: 5px;
    background: #FFF;
    max-width: 300px;

  }
  .login-input div:nth-child(1) {
    border-bottom: 1px solid #ddd;
  }
  .login-footer_fixed-bottom {
    height: auto;
    position: fixed;
    bottom: .52em;
    left: 0;
    right: 0;
  }
  .login-footer {
    color: #999;
    font-size: 14px;
    text-align: center;
  }
  .login-footer__link {
    color: #586C94;
  }
  .login-footer__text {

  }
</style>
